<!-- 相关笔记组件 -->
<template>
  <div class="related-notes-section">
    <h3 class="section-title">相关笔记</h3>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="related-notes-grid">
        <div
          v-for="(notes, index) in relatedNotes"
          :key="index"
          class="related-note-card"
          @click="goToDetail(notes.note.id)"
        >
          <img class="related-image" :src="notes.note.image_u" />
          <div class="related-content">
            <h4 class="related-title">{{ notes.note.title }}</h4>
            <div class="related-meta">
              <span class="related-author">{{ notes.note.author.n }}</span>
              <span class="related-likes">
                <van-icon name="like-o" size="12" />
                {{ notes.note.like_count }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { fetchRelatedNotes } from '@/api/index.js'
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const id = computed(() => route.params.id) //当前笔记id

const loading = ref(false)
const finished = ref(false)

const pageNumber = ref(1)
const limit = ref(20)
const offset = computed(() => (pageNumber.value - 1) * limit.value)

const relatedNotes = ref([])

//当前返回列表数量
const currentResponseLength = ref(0)

// watch id 变化,触发获取相关笔记方法
watch(
  () => id.value,
  async (newId) => {
    if (newId) {
      pageNumber.value = 1
      finished.value = false
      await getRelatedNotes(newId, offset.value, limit.value)
    }
  },
)

// 滑动页面 加载更多相关笔记
const onLoad = async () => {
  if (finished.value) {
    loading.value = false
    return
  }
  pageNumber.value++
  await getRelatedNotes(id.value, offset.value, limit.value)
}

// 相关笔记
const getRelatedNotes = async (id, offset, limit) => {
  try {
    loading.value = true

    const {
      state,
      result: { list },
    } = await fetchRelatedNotes(id, offset, limit)

    if (state === 'success') {
      currentResponseLength.value = list.length

      if (currentResponseLength.value > 0) {
        if (pageNumber.value === 1) {
          relatedNotes.value = list
        } else {
          relatedNotes.value = [...relatedNotes.value, ...list]
        }
      } else {
        //没有数据了
        finished.value = true
      }
    } else {
      // 如果请求失败，回退页码
      console.log('请求fail，回退页码')
      pageNumber.value--
      loading.value = false
    }
  } catch (error) {
    console.log('获取相关笔记失败', error)
    pageNumber.value--
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push({ path: `/note/${id}` })
}
</script>

<style scoped>
.related-notes-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding: 0 10px;
}

.related-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 10px;
}

.related-note-card {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.related-image {
  width: 100%;
  /* height: 120px; */
  object-fit: cover;
}

.related-content {
  padding: 8px;
}

.related-title {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #999;
}

.related-likes {
  display: flex;
  align-items: center;
  gap: 2px;
}
</style>
